#!/opt/bin/python2.6

import sys
sys.path.append("/volume1/dev/python/lib") 
import re,MySQLdb,mod_ced

print "Content-Type: text/html"
print
print """
<!DOCTYPE html> 
<html>
<head>
<title>Temperature Maison</title>
	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-2.0.3.js"></script>
	<script type="text/javascript" language="javascript" src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
	<script type="text/javascript" language="javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.js"></script>
	<script type="text/javascript" language="javascript" src="https://cdn.jsdelivr.net/jqplot/1.0.8/jquery.jqplot.min.js"></script>
	<script type="text/javascript" language="javascript" src="https://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.dateAxisRenderer.min.js"></script>
	<script type="text/javascript" language="javascript" src="https://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.json2.min.js"></script>
	<script type="text/javascript" language="javascript" src="https://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.cursor.min.js"></script>
	<script type="text/javascript" language="javascript" src="https://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.highlighter.min.js"></script>
	<link rel="stylesheet" href="/media/css/temp.css" type="text/css"></link>
	<link rel="stylesheet" href="/media/css/jquery.dataTables_themeroller.css" type="text/css"></link>
	<link rel="stylesheet" href="/media/css/jquery.jqplot.min.css" type="text/css"></link>
	<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/redmond/jquery-ui.css" type="text/css"></link>


 <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    }
  ul.navbar {
    position: absolute;
    top: 2em;
    left: 0em;
    width: 9em }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  </style>


  </head>
  <body>




<script type="text/javascript">
var num_chauf = 4
function updatechart()
{
d=new Date();
t=d.getTime(); 
for (i=0;i<=5;i++)
{ 
$.ajax({
        dataType: "json",
		type : 'GET',
     		url: '/chauf/ajax_graph_temp.cgi',
		data: {
				version : 2 ,
				time : t,
				num_chauf : i,
				interval : 3000
				},
     		success : function(data){
			line1 = data.line1 ;
			line2 = data.line2 ;
			$.jqplot('chart'+data.num_chauf, [line1,line2], {
				series:[
						{
							showMarker:false
						},
						{
							showMarker:false
						}
					],
    				axes:{
					xaxis:{
						renderer:$.jqplot.DateAxisRenderer,
						showTicks : false,
						},
					yaxis:{	
						min:15, 
						max:22,
						showTicks : false,
					      }
	   				}
  				});
  			}
});
}
};

$(function () {
   $( "#dialog" ).dialog({
       autoOpen: false,
       width: 'auto',
       position : [200,'top'] ,
       closeOnEscape: true,
       resizable : false
     });

$('body').on("click",'a[class|="popup_chart"]',  function(){
//$('#miseajour').click(function() {
   num_chauf = $(this).attr('tmp_ced');
   $("#dialog").dialog("open");
   d=new Date();
   t=d.getTime(); 
   $.ajax({
        dataType: "json",
		type : 'GET',
     		url: '/chauf/ajax_graph_temp.cgi',
		data: {
				version : 2 ,
				num_chauf : num_chauf,
				time : t,
				interval : 60
					}
					,
     		success : function(data){
			line1 = data.line1 ;
			line2 = data.line2 ;
			$.jqplot('chartd', [line1,line2], {
				series:[
						{
							showMarker:false
						},
						{
							showMarker:false
						}
					],
    				axes:{
					xaxis:{
						renderer:$.jqplot.DateAxisRenderer,
						},
					yaxis:{	
						min:15, 
						max:22,
						tickOptions:{
            						formatString:'%d'
            						}
					      }
					},
				highlighter: {
					        show: true,
					        sizeAdjust: 7.5
					      },
				 cursor: {
					        show: false
					      }
  				});
  			}
  });
  return false
 })
});
$(document).ready(function() {
var oTable = $('#table_root').dataTable( {
					"bJQueryUI": true,
					"sPaginationType": "full_numbers",
					"sDom": '<"H">t<"F"ip>',
					 "fnInitComplete": function(oSettings, json) {
      						updatechart()	
					}
				});
})
</script>
<div id="dialog" title="Graph">
	<div id="chartd" style="height:500px; width:900px;"></div>
</div>
<ul class="navbar">
  <li><a href="index.html">Home page</a>
  <li><a href="reflexions.html">Reflexions</a>
  <li><a href="ville.html">Ma ville</a>
  <li><a href="liens.html">Liens</a>
</ul>
<div id="content">
<div id="table_div">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="table_root">
<thead>
<tr>
<th>Name</th>
<th>Numero</th>
<th>Target Temp</th>
<th>Current Temp</th>
<th>graph</th>
</tr>
</thead>
<tbody>

"""
con = MySQLdb.connect(db ='mamaison',
                  user ='root',  host ='localhost', port =3306)
cur = con.cursor()
cur.execute("select * from log order by date desc limit 1")
data = cur.fetchone()

for num_piece in  mod_ced.pieces.keys():
	print '<tr>'
	print '<td>'+ mod_ced.pieces[num_piece].name+'</td>'
	print '<td>'+str(data[4*num_piece+1])+'</td>'
	print '<td>'+str(data[4*num_piece+3])+'</td>'
	print '<td>'+str(data[4*num_piece+4])+'</td>'
	print '<td><a class="popup_chart" tmp_ced="'+str(num_piece)+'"><div id="chart'+str(num_piece)+'" style="height:60px; width:100px;"></div></a></td>'
	print '</tr>'



print """
</tbody>
</table>
</div>
</div>
<div class="copyright">
    </div>
</body>
</html>


"""
